<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>用户登录</title>
    <link rel="stylesheet" href="/render/css/frontend/common/base.css"/>
    <link rel="stylesheet" href="/render/css/frontend/common/shop_common.css"/>
    <link rel="stylesheet" href="/render/css/frontend/common/global.css"/>
    <link rel="stylesheet" href="/render/css/frontend/login-register.css"/>
    <link rel="stylesheet" href="/render/css/frontend/shop_header.css"/>

    <style type="text/css">
        dt.checkcode {
            padding: 10px 0 0 0;
        }
        dd.checkImage {
            height: 32px;
        }
        img.checkimag {
             position: relative;
             top: 7px;
         }
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>

<div class="header wrap1000">
    <a href="/"><img src="render/images/logo.png" alt="ShopCZ"/></a>
</div>
<div class="main">
    <div class="login-form fr">
        <div class="form-hd">
            <h3>用户登录</h3>
        </div>
        <div class="form-bd">
            <form action="#" method="post">
                <dl>
                    <dt>用户名</dt>
                    <dd><input type="text" name="username" class="text" id="username"/></dd>
                </dl>
                <dl>
                    <dt>密&nbsp;&nbsp;&nbsp;&nbsp;码</dt>
                    <dd><input type="password" name="password" class="text" id="password"/></dd>
                </dl>
                <dl>
                    <dt class="checkcode">验证码</dt>
                    <dd class="checkImage">
                        <input type="text" name="code" id="imageCode" class="text" size="10" style="width:58px;">
                        <img class="checkimag" onclick="changeVerifyCode(this)" src="/render/validate/CodeImage"/>
                    </dd>
                </dl>
                <dl>
                    <dt>&nbsp;</dt>
                    <dd>
                        <input type="button" value="登  陆" class="submit"/>
                        <a href="/render/register" class="forget">注册</a>
                    </dd>
                </dl>
                <div>
                    <span id="info" style="color:red">${info}</span>
                </div>
            </form>
            <dl>
                <dt>&nbsp;</dt>
            </dl>
            <dl class="other">
                <dt>&nbsp;</dt>
                <dd>
                    <p>您可以用合作伙伴账号登录：</p>
                    <a href="javascript:void(0);" class="qq"></a>
                    <a href="javascript:void(0);" class="sina"></a>
                </dd>
            </dl>
        </div>
        <div class="form-ft">
        </div>
    </div>

    <div class="login-form-left fl">
        <img src="render/images/left.jpg" alt=""/>
    </div>
</div>

<jsp:include page="common/footer.jsp"></jsp:include>

<%--<script type="text/javascript" src="render/js/frontend/login.js"></script>--%>
<script type="text/javascript">
    var login_url = '/render/user/login';
    $('.submit').click(function() {
        // 获取输入的帐号
        var userName = $('#username').val();
        if (userName == null || userName === "") {
            HFalert({title: "帐号不能为空", type: 'warning', confirmButtonText: '确定'});
            $(".checkimag").click();
            return;
        }
        // 获取输入的密码
        var password = $('#password').val();
        if (password == null || password === "") {
            HFalert({title: "密码不能为空", type: 'warning', confirmButtonText: '确定'});
            $(".checkimag").click();
            return;
        }
        // 获取输入的验证码
        var imageCode = $('#imageCode').val();
        if (imageCode == null || imageCode === "") {
            HFalert({title: "验证码不能为空", type: 'warning', confirmButtonText: '确定'});
            $(".checkimag").click();
            return;
        }
        // 访问后台进行登录验证
        $.ajax({
            url : login_url,
            dataType: "text",
            type : "post",
            data : {
                username : userName,
                password : password,
                imageCode : imageCode
            },
            success : function(data) {

                // console.log("data1"+data);
                // console.log("data1"+JSON.parse(data).success);
                data=JSON.parse(data);
                if (data.success) {
                    window.location.href = '/';
                }else {
                    $("#username").val("");
                    $("#password").val("");
                    $("#imageCode").val("");
                    $(".checkimag").click();
                    HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                }
            },
            error: function (data) {
                // console.log("data2"+JSON.stringify(data));
                $("#username").val("");
                $("#password").val("");
                $("#imageCode").val("");
                $(".checkimag").click();
                data=JSON.parse(data);
                HFalert({title: data.responseText.message, type: 'warning', confirmButtonText: '确定'});
            }
        });
    });

    /**
     * 验证码操作
     */
    function changeVerifyCode(img) {
        img.src = "/render/validate/CodeImage?" + Math.floor(Math.random() * 100);
    }
</script>
</body>
</html>
